 <template>
    <div class="m3d">
        <div id="screen">
            <div id="command">
                <div id="bar"></div>
            </div>
            <div id="urlInfo"></div>
        </div>
    </div>
</template>

<script>
import m3d from "./m3d";
import config from "@/config/index";
import axios from "axios";

export default {
    data() {
        return {
            images: [
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/2hs2ctkl44y0lepzbgnghppufnnpph06_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/ifalh67bslnffx5p70rylbtfoomeil07_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/pwf9k6jmhtni39y9izmfa0bwv1az9nnn_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/tq0nrph9rycqhz751qopxr2ikfvugkrj_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/w5sz8v0u5wl64wgv2177n2yrny3h8mq3_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/65ijsz25t5c2bmyvassjnldgw79gc1k2_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/1dtmbcii8ryorv5v8rw5wgvnso4krnbc_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/3j31eot74acydkxoqbaltfphevh7df2q_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/njtt5qi2dls18juob83k0uusmn07o4cv_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/5akgs4vrz9w1d5w7w9eakiyc5nw86tvz_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://winfyho-cloud-0gfbcdsg0e062644-1301825810.tcloudbaseapp.com/tcb-cms/#/project/content/b00064a760b2fc5e1c50585d1699c72e?current=2&pageSize=10&pid=28ee4e3e608b744713b326c577e68080",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                },
                {
                    src:
                        "https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/ve1wtqw8iy9vfygx2lztrvea0j8w0lae_.jpg",
                    path:
                        "/article/detail?docId=28ee4e3e608b76d413b3f2d7015621da&shuId=Haliotis&ganId=Gastropoda"
                }
            ]
        };
    },
    mounted() {
        this.initM3d();
    },
    destroyed() {
        console.log("destroyed");
    },
    methods: {
        getImageList() {
            const baseURL = config.cmsApi;
            axios.get(`${baseURL}/home_images`).then(res => {
                const images = res.data.data;
                this.images = images;
                console.log("文章列表", images);
                this.initM3d(images);
            });
        },

        initM3d() {
            m3d.init(this.images);
        }
    }
};
</script>


<style lang="less" scoped>
@import "./base.css";
.m3d {
    .body {
        width: 100%;
    }

    // base
}
</style>